<!--登录页面-->
<template>
    <div class="loading czjz">
        <div class="yj4 bgff loadingbox ov">
            <p class="cen fz16 mt20">模仿微信视频通话</p>
            <van-cell-group class="mt30 pr" @click="show=true">
                <van-field v-model="xzName" placeholder="请选择一个账号" disabled />
                <van-icon name="arrow-down downser" class="z9" />
            </van-cell-group>
            <p class="mt20 pd">
                <van-button type="primary" class="w100 fz16" @click="quding">确定</van-button>
            </p>
        </div>

        <van-action-sheet v-model="show" :actions="actions" cancel-text="取消" close-on-click-action @select="onSelect" />
    </div>
</template>
<script>
    import userList from "@/util/userList"
    import {
        Storage
    } from "@/util/storage.js"
    export default {
        data() {
            return {
                show: false,
                xzName: '',
                actions: [],
                xzdz: '',
                storage: ''
            }
        },
        computed: {},
        components: {

        },
        methods: {
            onSelect(e) {
                this.xzName = e.name
                this.xzdz = e
            },
            quding() {
                this.storage = new Storage();
                this.storage.setItem({
                    name: "userInfo",
                    expires: 1000 * 60 * 60 * 24, // 过期时间为 4秒
                    value: this.xzdz
                })
                this.hf('/')
            }
        },
        mounted() {
            this.actions = userList
        },
    }

</script>
<style scoped>
    .loading {
        background: url('https://duxinggj-2018-1251133427.cos.ap-guangzhou.myqcloud.com/d22aa732-852c-4b31-b100-cf54aba98d5d.png');
        background-size: 100% 100%;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;

    }

    .loadingbox {
        width: 300px;
        height: 200px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    .downser {
        position: absolute;
        right: 10px;
        top: 15px;
    }

</style>
